<template>
  <view class="search-bar">
    <div class="search-content p-[24rpx]">
      <input type="text" placeholder="请输入关键词" class="search-input" confirm-type="search" v-model="keyword" @confirm="bindSearch()" maxlength="20" />
      <view class="search-btn">
        <img class="search-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201739%402x.png" />
      </view>
    </div>
    <div class="search-btn" @click="bindSearch()">搜索</div>
  </view>
  <div class="">
    <div class="page" v-if="!showSearch">
      <div class="history-content" v-if="localHistory.length > 0">
        <div class="label-del">
          <div class="label">历史记录</div>
          <div class="del-icon">
            <image src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%20663%402x.png" />
          </div>
        </div>

        <div class="history-ul">
          <div class="history-item" v-for="item in localHistory" :key="item" @click="bindSearch(item)">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="history-content">
        <div class="label-del">
          <div class="label">推荐搜索</div>
          <div class="del-icon" @click="geSearchKeys">
            <image src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201676%402x.png" style="width: 28rpx; height: 24rpx" />
            换一批
          </div>
        </div>

        <div class="history-ul">
          <div class="history-item" v-for="item in searchKeys" :key="item" @click="bindSearch(item)">
            {{ item }}
          </div>
        </div>
      </div>

      <div class="hot-content">
        <div class="hot-title">
          <image src="https://cos.aitshirt.cn/app-icon/%E7%83%AD%E6%A6%9C%402x.png" />
          <div class="nav-item" :class="{ active: tabIndex === 1 }" @click="tabIndex = 1">商品热销榜</div>
          <div class="nav-item" :class="{ active: tabIndex === 2 }" @click="tabIndex = 2">商品喜爱榜</div>
          <div class="nav-item" :class="{ active: tabIndex === 3 }" @click="tabIndex = 3">设计师热榜</div>
        </div>

        <div class="good-ul">
          <template v-if="tabIndex === 1">
            <div class="good-li" v-for="(item, index) in bestSellingProductsList" :key="item.id">
              <image :src="item.image" />
              <div class="good-info">
                <div class="good-number">第{{ index + 1 }}名</div>
                <div class="truncate good-name">
                  {{ item.storeName }}
                </div>
              </div>
            </div>
          </template>
          <template v-if="tabIndex === 2">
            <div class="good-li" v-for="(item, index) in likeProductsList" :key="item">
              <image :src="item.image" />
              <div class="good-info">
                <div class="good-number">第{{ index + 1 }}名</div>
                <div class="truncate good-name">
                  {{ item.storeName }}
                </div>
              </div>
            </div>
          </template>
          <template v-if="tabIndex === 3">
            <div class="good-li" v-for="(item, index) in hotDesignersList" :key="item">
              <image :src="item.avatar" />
              <div class="good-info">
                <div class="good-number">第{{ index + 1 }}名</div>
                <div class="truncate good-name">
                  {{ item.nickname }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <template v-else>
      <SearchTem :keyword="searchKey"></SearchTem>
    </template>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowRef, computed, unref } from 'vue';
import SearchTem from '@/pages/search/SearchTem.vue';
import { getBestsellingProductsList, getHotDesignersList, getLikeProductsList } from '@/api/searchApi';
import { getSearchKeyword } from '@/api/store';
import { useSearchHistoryStore } from '@/state/modules/searchHistory';
const useSearchHistory = useSearchHistoryStore();
useSearchHistory.initHistory();

const tabIndex = ref(1);
const bestSellingProductsList = shallowRef([]);
const likeProductsList = shallowRef([]);
const hotDesignersList = shallowRef([]);
const showSearch = ref(true);

const searchKeys = shallowRef([]);

const localHistory = computed(() => useSearchHistory.historyList);

onMounted(() => {
  getBestsellingProductsList(1, 9).then((res) => {
    bestSellingProductsList.value = res.data;
  });

  getLikeProductsList(1, 9).then((res) => {
    likeProductsList.value = res.data;
  });

  getHotDesignersList(1, 9).then((res) => {
    hotDesignersList.value = res.data;
  });
  geSearchKeys();
});

function geSearchKeys() {
  getSearchKeyword().then((res) => {
    searchKeys.value = res.data;
  });
}
const keyword = shallowRef('');
const searchKey = shallowRef('')
function bindSearch() {
  console.log(keyword, 'bindSearch');
  searchKey.value = keyword.value;
  if (!keyword.value) return;
  useSearchHistory.addHistory(unref(keyword));
  showSearch.value = true;
}

function updateLocalSearch() {}
</script>

<style scoped lang="scss">
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  //width: 100vw;
  height: 88rpx;
  background: #ffffff;
  box-shadow: 0rpx 1rpx 0rpx 2rpx #e7e7e7;
  padding: 8rpx 16rpx !important;
  box-sizing: content-box;
  .search-content {
    flex: 1;
    width: calc(100% - 48rpx);
    height: 72rpx;
    display: flex;
    align-items: center;
    background: #f3f7f8;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 0 16px;
    .search-input {
      flex: 1;
      height: 38rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 38rpx;
    }

    .search-btn {
      .search-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .search-btn {
    height: 42rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    margin-left: 24rpx;
    white-space: nowrap;
  }
}

.page .history-content {
  padding: 16px 16rpx 0;
  .label-del {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16rpx;
    .label {
      height: 38rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .del-icon {
      display: flex;
      align-items: center;
      gap: 4rpx;
      image {
        width: 25rpx;
        height: 28rpx;
      }
      font-weight: 400;
      font-size: 20rpx;
      color: #666666;
      line-height: 28rpx;
    }
  }

  .history-ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    .history-item {
      height: 48rpx;
      background: #f8f8f8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 48rpx;
      text-align: center;
      padding: 8rpx;
    }
  }
}

.page .hot-content {
  background: linear-gradient(180deg, #fff4f1 0%, #ffffff 100%);
  padding: 28rpx 16rpx;
  margin: 32rpx 16rpx;
  .hot-title {
    display: flex;
    align-items: center;
    gap: 32rpx;
    image {
      width: 28rpx;
      height: 30rpx;
      margin-right: -18rpx;
    }
    .nav-item {
      font-weight: 400;
      font-size: 28rpx;
      color: #6f6f6f;
      line-height: 38rpx;
      &.active {
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
      }
    }
  }

  .good-ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 22rpx 0;
    gap: 16rpx;
    .good-li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //width: 218rpx;
      height: 260rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #e4edef;
    }
    image {
      width: 128rpx;
      height: 128rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #707070;
    }
    .good-number {
      height: 28rpx;
      line-height: 28rpx;
      background: #f3f7f8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      margin: 8rpx 0;
      font-weight: 400;
      font-size: 16rpx;
      color: #f25a27;
      text-align: center;
    }
    .good-name {
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
    }
  }
}
</style>
